<template>
	<joy-page class="joyPage" :needLogin="false">
		<cu-custom style="color: #ffffff;" bgColor="#ffffff" :isBack="true"><block slot="content">安全中心</block></cu-custom>
		<view class="safe-box">
			<view class="info-wrapper">
				<view>
					<view class="title">您的实名信息</view>
					<view class="info">姓名：{{userInfo.username}}</view>
					<view class="info">身份证号：{{indexInfo.certificate}}</view>
				</view>
				<!-- <image class="safe-img" src="/static/img/safetyCenter1.png" mode="widthFix"></image> -->
			</view>
			<view>
				<view class="safe-item" v-if="indexInfo.yunmobile" @tap="goPage('modifiedCertifiedPhone')">
					<image class="s-i-img" src="/static/img/bluephone.png"></image>
					<view class="s-i-title">修改认证手机</view>
					<image class="s-i-jump" src="/static/img/jiantou.png"></image>
				</view>
				<view class="safe-item" v-else @tap="goPage('certifiedPhone')">
					<image class="s-i-img" src="/static/img/bluephone.png"></image>
					<view class="s-i-title">前往认证手机</view>
					<image class="s-i-jump" src="/static/img/jiantou.png"></image>
				</view>
				<view class="safe-item" @tap="goPage('modifiedLoginPhone')">
					<image class="s-i-img" src="/static/img/yellowphone.png"></image>
					<view class="s-i-title">修改登录手机</view>
					<image class="s-i-jump" src="/static/img/jiantou.png"></image>
				</view>
				<view class="safe-item" @tap="goPage('modifiedPayPsw')">
					<image class="s-i-img" src="/static/img/bluepass.png"></image>
					<view class="s-i-title">{{hasSetPayPsw?'重置支付密码':'设置支付密码'}}</view>
					<image class="s-i-jump" src="/static/img/jiantou.png"></image>
				</view>
				<view class="safe-item" @tap="goPage('modifiedLoginPsw')">
					<image class="s-i-img" src="/static/img/yellowpass.png"></image>
					<view class="s-i-title">修改登录密码</view>
					<image class="s-i-jump" src="/static/img/jiantou.png"></image>
				</view>
			</view>
			
			<!-- <view class="info-card-box flex justify-center">
				<view class="info-card flex" v-if="indexInfo.yunmobile" @tap="goPage('modifiedCertifiedPhone')">
					<image class="info-img" src="/static/img/safetyCenter3.png" mode="widthFix"></image>
					<view>
						<view>修改</view>
						<view>认证手机</view>
					</view>
				</view>
				<view class="info-card flex" v-else @tap="goPage('certifiedPhone')">
					<image class="info-img" src="/static/img/safetyCenter3.png" mode="widthFix"></image>
					<view>
						<view>前往</view>
						<view>认证手机</view>
					</view>
				</view>
				<view class="info-card flex" @tap="goPage('modifiedLoginPhone')">
					<image class="info-img" src="/static/img/safetyCenter3.png" mode="widthFix"></image>
					<view>
						<view>修改</view>
						<view>登录手机</view>
					</view>
				</view>
				<view class="info-card flex" @tap="goPage('modifiedPayPsw')">
					<image class="info-img" src="/static/img/safetyCenter2.png" mode="widthFix"></image>
					<view>
						<view>{{hasSetPayPsw?'重置':'设置'}}</view>
						<view>支付密码</view>
					</view>
				</view>
				<view class="info-card flex" @tap="goPage('modifiedLoginPsw')">
					<image class="info-img" src="/static/img/safetyCenter2.png" mode="widthFix"></image>
					<view>
						<view>修改</view>
						<view>登录密码</view>
					</view>
				</view>
			</view> -->
		</view>
	</joy-page>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['hasSetPayPsw'])
		},
		data(){
			return{
				indexInfo: {}
			}
		},
		async onLoad(query) {
			await this.$AppEntryController.main(query);
			this.getInfo();
		},
		methods:{
			goPage(rName){
				console.log(rName)
				this.$mRouter.push({
					route: this.$mRoutesConfig[rName],
				})
			},
			async getInfo() {
				this.indexInfo= await this.$apis.safeData(this.info);
				this.$store.commit("SET_USERINFO", Object.assign(this.indexInfo, this.userInfo) || {});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.joyPage{
		background-image: url("https://test.hrycf.com/hryxcx/safeCenter.png");
		// background-color: #000000;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 436rpx;
		position: relative;	
	}
	.safe-box{
		top: 100rpx;
		left: 50%;
		transform: translate(-50%,0);
		position: absolute;
	}
	.info-wrapper{
		// position: absolute;
		width: 100%;
		// height: 400rpx;
		padding: 64rpx 40rpx 64rpx 40rpx;
		z-index: 0;
		.title{
			font-size:36rpx;
			font-family:PingFang SC;
			font-weight:800;
			color:#ffffff;
			margin-bottom: 42rpx;
		}
		.info{
			position: relative;
			font-size:30rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:#ffffff;
			z-index: 10;
		}
	}
	.safe-img{
		position: absolute;
		right: 0;
		top: 0;
		width: 68%;
		z-index: 0;
	}
	.safe-item{
		width: 690rpx;
		height: 144rpx;
		background-color: #ffffff;
		padding:17rpx;
		display: flex;
		align-items: center;
		margin-bottom:40rpx ;
		border-radius: 12rpx;
		box-shadow: 5rpx 5rpx 10rpx rgba(137, 168, 193, 0.13);
		.s-i-img{
			width: 110rpx;
			height: 110rpx;
			display: block;
		}
		.s-i-title{
			flex-grow: 1;
		}
		.s-i-jump{
			width: 44rpx;
			height: 44rpx;
		}
		
	}
	.info-card-box{
		flex-wrap: wrap
	}
	.info-card{
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
		padding: 29rpx 49rpx;
		width: 40%;
		border-radius:20rpx;
		.info-img{
			width: 54rpx;
			height: 76rpx;
			margin-right: 30rpx;
		}
	}
	.info-card:nth-child(1){
		background:linear-gradient(-90deg,rgba(255,92,83,1) 0%,rgba(255,141,129,1) 100%);
		box-shadow:-1rpx 4rpx 9rpx 1rpx rgba(236,89,69,0.3);
		margin-right: 30rpx;
		margin-bottom: 45rpx;
		margin-top: 87rpx;
	}
	.info-card:nth-child(2){
		background:linear-gradient(-90deg,rgba(162,112,252,1) 0%,rgba(216,163,254,1) 100%);
		box-shadow:-1rpx 4rpx 9rpx 1rpx rgba(206,153,254,0.3);
		margin-bottom: 45rpx;
		margin-top: 87rpx;
	}
	.info-card:nth-child(3){
		background:linear-gradient(-90deg,rgba(255,106,0,1) 0%,rgba(254,174,125,1) 100%);
		box-shadow:-1rpx 4rpx 9rpx 1rpx rgba(236,89,69,0.3);
		margin-right: 30rpx;
	}
	.info-card:nth-child(4){
		background:linear-gradient(-90deg,rgba(253,76,255,1) 0%,rgba(253,133,255,1) 100%);
		box-shadow:-1rpx 4rpx 9rpx 1rpx rgba(253,115,255,0.3);
	}
	
</style>
